<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title></title>
   
    <link rel="shortcut icon" href="favicon.ico"> <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css?v=4.1.0" rel="stylesheet">
    

</head>

<body class="gray-bg">

 <div class="modal inmodal fade" id="myModal5" tabindex="-1" role="dialog"  aria-hidden="true">
                                <div class="modal-dialog modal-lg">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                                            <small class="font-bold">查看证件照
                                        </div>
                                        <div class="modal-body">
                                           <img alt="" id ="visitorPhoto" src=""/>
                                        </div>

                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                                        </div>
                                    </div>
                                </div>
 </div>

    <div class="wrapper wrapper-content animated fadeInRight">

        <!-- Panel Other -->
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>访客</h5>
                <div class="ibox-tools">
                   
                </div>
            </div>
            <div class="ibox-content">
                <div class="row row-lg">
                    <div class="col-sm-12">
                        <!-- Example Card View -->
                        <div class="example-wrap">
                            
                            <div class="example">
                                <table id="areaTable" >
                                    
                                </table>
                            </div>
                        </div>
                        <!-- End Example Card View -->
                    </div>

                </div>
            </div>
        </div>
        <!-- End Panel Other -->
		
    </div>

    <!-- 全局js -->
    <script src="js/jquery.min.js?v=2.1.4"></script>
    <script src="js/bootstrap.min.js?v=3.3.6"></script>

    <!-- 自定义js -->
    <script src="js/content.js?v=1.0.0"></script>


    <!-- Bootstrap table -->
    <script src="js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
    <script src="js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
    <script src="js/aivms5.js"></script>
    
<script>
var base_url = aivms5_base_url;
window.operateEvents={
        "click a.showPhoto":function(e,value,row,index){
        	e.stopPropagation();
        //   alert(row.id);
        	$("#myModal5").modal("show");
        	$("#visitorPhoto")[0].src=base_url +"/"+value;
        }
}

 $("#areaTable").bootstrapTable({
        url:base_url + "/visitor/list",
        method:'post',
        cache:false,
        pagination:true,
        sortable:false,
        sidePagination:"server",
        pageNumber:1,
        pageSize:10,
        search:false,
        uniqueId:'id',
        showRefresh: false,
        queryParams: queryParams,//传递参数（*）
		contentType: "application/x-www-form-urlencoded",
		ajaxOptions:{
          headers: {"token":"aaaa"}
        },
        clickToSelect:true,
        columns:[
			{  
			    formatter: function (value, row, index) {  
			        return index+1;  
			    }  
			},
			{
                field:"checked",
                checkbox : true
            },
			{
			    field:"id",
			    title:"id"
			},
            {
                field:"name",
                title:"姓名"
            },
			{
                field:"sex",
                title:"性别"
            },
			{
                field:"idnum",
                title:"身份证号"
            },
			{
                field:"phone",
                title:"手机"
            },
            {
                field:"photo",
                title:"照片",
                events:operateEvents,
                formatter: function (value, row, index) {
                	if(value != null)
                		{
                		return '<a class="showPhoto">查看</a>';
                		}
                	else
                		{
                		return '无照片';
                		}
                	
                }
            }
          
        
        ]
    });

	  function queryParams(params) {
        var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
            limit: params.limit,   //页面大小
            offset: params.offset,  //页码
           
        };
        return temp;
       };
</script>

</body>

</html>
